<template>
  <div id="index">
    <a-carousel arrows autoplay>
      <div
        slot="prevArrow"
        class="custom-slick-arrow"
        style="display: flex; left: 8.7rem; z-index: 1"
      ></div>
      <div
        slot="nextArrow"
        class="custom-slick-arrow"
        style="display: flex; right: 8.7rem"
      ></div>
      <div class="banner" v-for="(img, index) in bannerList" :key="index">
        <img :src="img" width="100%" height="auto" mode="widthFix" />
      </div>
    </a-carousel>
    <div class="advantage">
      <ul>
        <li>
          <div class="txt1">
            <countTo
              ref="uCountTo1"
              :start-val="0"
              :end-val="2000"
              :duration="3000"
              separator=""
            /><sup>+</sup>
          </div>
          <span class="txt2">项目广泛应用</span>
        </li>
        <li>
          <div class="txt1">
            <countTo
              ref="uCountTo2"
              :start-val="0"
              :end-val="10"
              :duration="3000"
              separator=""
            />亿<sup>+</sup>
          </div>
          <span class="txt2">年营业额</span>
        </li>
        <li>
          <div class="txt1">
            <countTo
              ref="uCountTo3"
              :start-val="0"
              :end-val="9000"
              :duration="3000"
              separator=""
              class="uCountTo"
            /><sup>+</sup>
          </div>
          <span class="txt2">覆盖用户人群</span>
        </li>
        <li>
          <div class="txt1">
            <countTo
              ref="uCountTo4"
              :start-val="0"
              :end-val="2000"
              :duration="3000"
              separator=""
              class="uCountTo"
            /><sup>+</sup>
          </div>
          <span class="txt2">数字商品品牌供应商</span>
        </li>
      </ul>
    </div>
    <div class="programme">
      <span>产品方案</span>
      <p>四大价值服务 . 延长服务价值链条 . 提供一站式解决方案</p>
      <!-- <ul class="programme_ul">
        <li v-for="(item, index) in programmeList" :key="index">
          {{ item }}
        </li>
      </ul> -->
      <div class="iconbox" style="margin-top: 2.35rem">
        <div class="box" style="margin-right: 8.7rem">
          <img v-lazy="require('@/assets/icon/icon_programme1.png')" />
          <div class="rightspan">
            <span style="color: #181818; font-size: 1.26rem"
              >标准化运营服务</span
            >
            <div style="color: #7d7a7a; font-size: 1.14rem">
              符合用户需求的权益商品配置、优化
            </div>
          </div>
        </div>
        <div class="box">
          <img v-lazy="require('@/assets/icon/icon_programme2.png')" />
          <div class="rightspan">
            <span style="color: #181818; font-size: 1.26rem">满足需求</span>
            <div style="color: #7d7a7a; font-size: 1.14rem">
              业务价值 用户体验 场景服务
            </div>
          </div>
        </div>
      </div>
      <div class="bgbox">
        <div class="leftbox">
          <div class="leftbg">
            <div
              class="iconbox"
              style="width: 100%; display: flex; justify-content: space-around"
            >
              <div class="box">
                <img
                  v-lazy="require('@/assets/icon/programme_icon1.png')"
                  class="img1"
                />
                <div class="rightspan">
                  <span>数字营销</span>
                  <div>全媒体营销</div>
                </div>
              </div>
              <div class="box">
                <img
                  v-lazy="require('@/assets/icon/programme_icon2.png')"
                  class="img1"
                />
                <div class="rightspan">
                  <span>商城系统</span>
                  <div>场景化SaaS商城</div>
                </div>
              </div>
              <div class="box">
                <img
                  v-lazy="require('@/assets/icon/programme_icon3.png')"
                  class="img1"
                />
                <div class="rightspan">
                  <span>权益营销</span>
                  <div>数字化权益营销平台</div>
                </div>
              </div>
            </div>
            <div class="leftbg_active">
              <div class="activetxt">
                <div>数字营销</div>
                <div style="margin: 0.86rem auto">全媒体营销</div>
                <div style="line-height: 1.26rem">
                  行业定制专属营销方案，提升知名度解决用户增长困境
                </div>
              </div>
              <div class="activetxt">
                <div>商城系统</div>
                <div style="margin: 0.86rem auto">场景化SaaS商城</div>
                <div style="line-height: 1.26rem">
                  为企业打造场景化、线上化的商 城解决方案，提高客户满意度
                </div>
              </div>
              <div class="activetxt">
                <div>权益营销</div>
                <div style="margin: 0.86rem auto">数字化权益营销平台</div>
                <div style="line-height: 1.26rem">
                  围绕客户全生命周期打造行内数 字化、场景化权益营销平台
                </div>
              </div>
              <div class="activetxt">
                <div>标准化运营服务</div>
                <div style="margin: 0.86rem auto">全方位运营服务</div>
                <div style="line-height: 1.26rem">
                  符合用户需求的权益商品配置、优化
                </div>
              </div>
              <div class="activetxt">
                <div>软开服务</div>
                <div style="margin: 0.86rem auto">
                  专业、创新、领军的数字科技服务提供商
                </div>
                <div style="line-height: 1.26rem">
                  全场景化软件开发能力 助力企业建立健全互联网+营销体系
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="rightbox">
          <div class="rightbg">
            <div
              class="iconbox"
              style="width: 100%; display: flex; justify-content: center"
            >
              <div class="box">
                <img
                  v-lazy="require('@/assets/icon/programme_icon4.png')"
                  class="img1"
                />
                <div class="rightspan">
                  <span>开放平台</span>
                  <div style="line-height: 1.26rem">
                    福利商城、虚拟卡券、本地生活、自营直供
                  </div>
                </div>
              </div>
            </div>
            <div class="rightbg_active">
              <div class="activetxt">
                <div>聚合电商</div>
                <div style="line-height: 1.26rem">
                  对接京东、苏宁、齐心、网易严选、小米有品等10余家电商平台，300万+SKU品类
                </div>
              </div>
              <div class="activetxt">
                <div>虚拟卡券</div>
                <div style="line-height: 1.26rem">
                  猫眼电影、星巴克、视听会员、饿了么等上千种虚拟卡券
                </div>
              </div>
              <div class="activetxt">
                <div>本地生活</div>
                <div style="line-height: 1.26rem">
                  驿趣-洗衣、洗车、体检、家政等服务，可根据客户需要拓展全国商户
                </div>
              </div>
              <div class="activetxt">
                <div>自营直供</div>
                <div style="line-height: 1.26rem">
                  涵盖电器、食品、粮油、生活日用等品类商品厂家直供，可提供定制服务
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <div style="background-color: #fafafa">
      <div class="MC">
        <span class="mcTitle">鲸禧卡</span>
        <div class="mcIcon">
          <div class="mcText">
            <span class="name">记名VIP卡</span>
            <span class="noName">不记名卡</span>
          </div>
          <img class="mcImg1" src="@/assets/icon/mcCard3.png" alt="" />
          <img class="mcImg2" src="@/assets/icon/mcCard5.png" alt="" />
          <div @click="onChange(1)" style="display: inline-block">
            <img
              v-if="choose1"
              class="mcImg3"
              src="@/assets/icon/mcCard2.png"
              alt=""
            />
            <img v-else class="mcImg5" src="@/assets/icon/mcCard1.png" alt="" />
          </div>
          <img class="mcImg4" src="@/assets/icon/mcCard5.png" alt="" />
          <div @click="onChange(2)" style="display: inline-block">
            <img
              v-if="choose1"
              class="mcImg5"
              src="@/assets/icon/mcCard1.png"
              alt=""
            />
            <img v-else class="mcImg3" src="@/assets/icon/mcCard2.png" alt="" />
          </div>
          <img class="mcImg6" src="@/assets/icon/mcCard5.png" alt="" />
          <img class="mcImg7" src="@/assets/icon/mcCard4.png" alt="" />
        </div>
        <div class="mcBanner">
          <img
            src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/mcCard2.png"
            alt=""
          />
          <div class="mcBannerText">
            <p style="font-size: 1.14rem; margin-bottom: 1rem">
              {{
                showText
                  ? "记名VIP卡 面值: 5000元及以下"
                  : "不记名VIP卡 面值: 5000元及以下"
              }}
            </p>
            <p v-if="showText">
              一、按照单用途预付卡规章制度，记名卡面值最大为5000元，客户可根据需要购买5000元之间任意整百的面值:
            </p>
            <p v-else>
              一、按照单用途预付卡规章制度，不记名卡面值最大为1000元，客户可根据需要购买100元至1000元（包含1000元）之间任意整百的面值。也可根据特殊需要充值100元的任意面值。
            </p>
            <p>
              二、客户持此卡搜索“万商鲸禧”小程序，可进行“话费充值”、“油卡充值”、“线上商城”、“线上购卡”、“卡券兑换”等线上功能体验!
            </p>
            <p>三、鲸禧卡有哪些优点呢?</p>
            <p>
              1、方便携带，一张卡吃喝玩乐全部满足，出行更舒心。<br />
              2、资金安全，再也不用为店铺倒闭所烦恼。<br />
              3、送礼首选，告别选择苦恼,送亲朋好友倍有面子。
            </p>
          </div>
        </div>
        <div class="buyBtn" @click="onBuyCard">前往购卡</div>
      </div>
    </div> -->

    <div class="number">
      <div class="titletxt">
        <h5>全场景的数字化赋能</h5>
        <span>构建专业、高效、协同的互联网一体化服务</span>
      </div>
      <ul class="num_ul">
        <li class="item1">
          <div class="num_li">
            <span>海量权益商品</span>
            <div>Equity</div>
            <div class="p_div">
              拥有猫眼电影、 星巴克、视频会员、饿了么 等上千种虚拟卡券
            </div>
          </div>
        </li>
        <li class="item2">
          <div class="num_li">
            <span>聚合电商</span>
            <div>Converged online shops</div>
            <div class="p_div">
              支持对接京东、苏宁、齐心、 严选、 小米有品等10余家电商平台 300多
              万SKU
            </div>
          </div>
        </li>
        <li class="item3">
          <div class="num_li">
            <span>数字场景开发</span>
            <div>Digital scene development</div>
            <div class="p_div">
              API应用程序标准接口&SaaS权益平台高频权益场景植入、权益平台功能完整提供、用户生命周期经营。
            </div>
          </div>
        </li>
        <li class="item4">
          <div class="num_li">
            <span>技术研发</span>
            <div>Technology R&D</div>
            <div class="p_div">
              专业技术团队，微信公众号、小程序、H5等一键部署，为开发者提供强悍活动支撑能力。
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="supply">
      <div class="titletxt">
        <h5>丰富的供应链资源保障您的福利体验</h5>
        <span>整合优质资源，满足员工个性化需求</span>
      </div>

      <div class="content">
        <ul class="supply_ul">
          <li>
            <div class="imgdiv"></div>
            <div class="txt">福利场景覆盖全</div>
            <div class="txt">一站式体验</div>
            <div class="line"></div>
            <p>
              严选一线品牌权益产品，保障福利品质，高效匹配多种消费场景，满足个性化需求。
            </p>
          </li>
          <li>
            <div class="imgdiv2"></div>
            <div class="txt">供应链资源广满足</div>
            <div class="txt">企业职工多元化需求</div>
            <div class="line"></div>
            <p>
              自营接入了超过1000家合作供 应商，包括京东、海量品牌直签
              及一级代理等优质资源，保障品 质，保证用户体验。
            </p>
          </li>
          <li>
            <div class="imgdiv3"></div>
            <div class="txt">企业团购性价比更高</div>
            <div class="txt">职工福利更超值</div>
            <div class="line"></div>
            <p>
              通过聚合全国大中型企业客户海 量用户规模，通过直连、大客户
              协议等深度合作，深耕长期稳固 的供应商资源，提供用户更高的
              性价比，提高企业福利预算效 能。
            </p>
          </li>
          <li>
            <div class="imgdiv4"></div>
            <div class="txt">统一售后服务</div>
            <div class="txt">无需担忧售后问题</div>
            <div class="line"></div>
            <p>
              专人专项服务，完善的服务监控、数据备份机制，提供7*24小时客服解决方案，让服务渗透每处细节，为福利建设锦上添花。
            </p>
          </li>
        </ul>
      </div>
    </div>
    <div class="titletxt">
      <h5>精英团队</h5>
      <span>用一流的服务，为客户解决方案</span>
    </div>
    <div class="guide-content">
      <ul class="salesList">
        <li>
          <img
            src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/sale1.jpg"
          />
          <div class="salespan">
            <span style="font-size: 1.6rem; color: #000000; line-height: 2.1rem"
              >李原</span
            >
            <span style="font-size: 1.3rem; color: #666666; line-height: 1.7rem"
              >福利顾问</span
            >
          </div>
          <div class="salespan1">
            “用数字化弹性福利平台打造专属企业组织发展的福利模式”
          </div>
        </li>
        <li>
          <img
            src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/sale3.png"
          />
          <div class="salespan">
            <span style="font-size: 1.6rem; color: #000000; line-height: 2.1rem"
              >黄婷</span
            >
            <span style="font-size: 1.3rem; color: #666666; line-height: 1.7rem"
              >福利顾问</span
            >
          </div>
          <div class="salespan1">“专为企业福利赋能，让福利更温暖”</div>
        </li>
        <li>
          <img
            src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/sale12.jpg"
          />
          <div class="salespan">
            <span style="font-size: 1.6rem; color: #000000; line-height: 2.1rem"
              >张则凯</span
            >
            <span style="font-size: 1.3rem; color: #666666; line-height: 1.7rem"
              >福利顾问</span
            >
          </div>
          <div class="salespan1">“小认可， 大幸福——看见每个人的闪光点“</div>
        </li>
        <li>
          <img
            src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/sale5.png"
          />
          <div class="salespan">
            <span style="font-size: 1.6rem; color: #000000; line-height: 2.1rem"
              >王萱</span
            >
            <span style="font-size: 1.3rem; color: #666666; line-height: 1.7rem"
              >福利顾问</span
            >
          </div>
          <div class="salespan1">
            “激励员工、激活组织，打造正向企业磁场
            ，实现企业经营哲学的数字化落地”
          </div>
        </li>
        <li>
          <img
            src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/sale2.png"
          />
          <div class="salespan">
            <span style="font-size: 1.6rem; color: #000000; line-height: 2.1rem"
              >夏一丁</span
            >
            <span style="font-size: 1.3rem; color: #666666; line-height: 1.7rem"
              >福利顾问</span
            >
          </div>
          <div class="salespan1">
            “真心的对别人产生点兴趣，是推销员最重要的品格”
          </div>
        </li>
      </ul>
    </div>

    <div class="titletxt">
      <h5>合作伙伴</h5>
      <span>10000+品牌客户共同的选择</span>
    </div>
    <div class="cooper">
      <img
        src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/company1.png"
      />
    </div>
    <div class="footer-top">
      <div class="licence-code">
        <ul class="nav">
          <li class="active">首页</li>
          <li>产品与服务</li>
          <li>解决方案</li>
          <li>开放平台</li>
          <li>新闻中心</li>
          <li>关于我们</li>
          <li>联系我们</li>
        </ul>
        <!-- <div>
          <h5 class="about-h55">企业地址</h5>
          <p class="adress">
            南京总公司：南京市秦淮区光华路海福巷90-1号 南报文创园
          </p>
        </div> -->
      </div>
    </div>

    <!-- 右侧滚动 -->
    <KeFu ref="kefu"></KeFu>
  </div>
</template>

<script>
if (process.browser) {
  // 在这里根据环境引入wow.js
  var { WOW } = require("wowjs");
}
import KeFu from "../components/kefu.vue";
export default {
  components: {
    KeFu,
  },
  // asyncData({ store, $api }) {
  //   let sid = store.state.sid;
  //   return Promise.all([$api.getImgs(sid)])
  //     .then((res) => {
  //       store.commit("setImgs", res[0]);
  //     })
  //     .catch((err) => {
  //       throw err;
  //     });
  // },
  data() {
    return {
      icon0: 2,
      icon1: 1,
      icon2: 1,
      imgurl1: "http://120.27.231.243:8219",
      programmeList: ["供应链", "系统平台", "场景应用", "运营服务"],
      images: [""],
      choose1: true, // 选中
      showText: true,
      bannerList: [
        "https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/banner-20241120.jpg",
      ],
      // "https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/banner_20250811114901_15.jpg", 2025中秋元素banner
      // "https://njmcsw.oss-cn-beijing.aliyuncs.com/web/banner2-20241030.png",
      // "https://njmcsw.oss-cn-beijing.aliyuncs.com/web/banner20241030.png",
      // "https://njmcsw.oss-cn-beijing.aliyuncs.com/web/banner_20231219.jpg",
    };
  },
  computed: {
    // bannerList() {
    //   return this.$store.state.bannerList;
    // },
  },
  mounted() {
    window.addEventListener("scroll", this.scrollHandle, true);
    this.$nextTick(() => {
      if (process.browser) {
        // 在页面mounted生命周期里面 根据环境实例化WOW
        new WOW({ animateClass: "animate__animated" }).init();
      }
    });
  },
  scrollHandle() {
    const element = document.getElementById("statistics");
    const elementHeight = element.clientHeight;
    const elementOffsetTop = element.offsetTop;
    const windowHeight = document.documentElement.clientHeight;
    const windowScrollTop = document.documentElement.scrollTop;

    if (
      windowScrollTop <= elementOffsetTop + elementHeight &&
      windowScrollTop >= elementOffsetTop - windowHeight
    ) {
      if (this.isflag == true) {
        this.start();
        this.start1();
        this.start2();
        this.start3();
        this.isflag = false;
      }
    } else {
      this.isflag = true;
    }
  },
  methods: {
    start() {
      this.$refs.uCountTo.start();
    },
    start1() {
      this.$refs.uCountTo1.start();
    },
    start2() {
      this.$refs.uCountTo2.start();
    },
    start3() {
      this.$refs.uCountTo3.start();
    },
    paused() {
      this.$refs.uCountTo.paused();
      this.$refs.uCountTo1.paused();
    },
    reStart() {
      this.$refs.uCountTo.reStart();
      this.$refs.uCountTo1.reStart();
    },
    getIcon(index) {
      if (index == 0) {
        this.icon0 = 2;
        this.icon1 = 1;
        this.icon2 = 1;
      } else if (index == 1) {
        this.icon1 = 2;
        this.icon0 = 1;
        this.icon2 = 1;
      } else {
        this.icon2 = 2;
        this.icon1 = 1;
        this.icon0 = 1;
      }
    },
    showImg(listName, index) {
      console.log("图加载完毕");
      this.$set(this[listName][index], "showImg", true);
    },
    // 点击去购卡
    onBuyCard() {
      this.$refs.kefu.onShow(1);
    },
    // 点击记名/不记名
    onChange(type) {
      if (type === 1) {
        this.choose1 = true;
        this.showText = true;
      } else {
        this.choose1 = false;
        this.showText = false;
      }
    },
  },
};
</script>
<style scoped lang="scss">
#index {
  width: 100%;
  .advantage {
    width: 100%;
    height: 14.5rem;
    background: #f4f5f8;
    align-items: center;
    ul {
      width: 100%;
      height: 14.5rem;
      display: flex;
      align-items: center;
      justify-content: center;

      li {
        width: 26.9rem;
        height: 11.9rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-right: 0.1rem solid #ef633d;

        .txt1 {
          font-size: 4rem;
          font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
          font-weight: 700;
          text-align: center;
          color: #cd0000;
          margin-bottom: 0.95rem;

          span {
            display: inline-block;
          }
        }

        .txt2 {
          font-size: 1.4rem;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: center;
          color: #666666;
          line-height: 2rem;
          display: block;
        }
      }
    }
  }
  .ant-carousel {
    // height: 37.5rem;
    line-height: 0px !important;
  }
  .programme {
    width: 107.6rem;
    margin: 0 auto;
    padding: 5.3rem 0;
    box-sizing: border-box;

    span {
      font-size: 3rem;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: left;
      color: #181818;
    }

    p {
      font-size: 2.4rem;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: left;
      color: #181818;
      margin-top: 1.6rem;
    }

    .programme_ul {
      display: flex;

      li {
        width: 11.9rem;
        height: 2.8rem;
        background: rgba(224, 37, 27, 0.13);
        border-radius: 1.4rem;
        font-size: 1.6rem;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        text-align: center;
        line-height: 2.8rem;
        color: #e0251b;
        margin: 1.6rem 2.4rem 3.3rem 0;
      }
    }

    .iconbox {
      display: flex;

      .box {
        display: flex;

        img {
          width: 3.7rem;
          height: 4.3rem;
          margin-right: 0.6rem;
        }

        .img1 {
          width: 5rem;
          height: 6rem;
        }

        .rightspan {
          display: flex;
          flex-direction: column;
          justify-content: center;

          span {
            font-size: 1.8rem;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            text-align: left;
            color: #333333;
            margin-bottom: 0.3rem;
          }

          div {
            font-size: 1.2rem;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            text-align: left;
            color: #848484;
            margin-top: 0.3rem;
          }
        }
      }
    }

    .bgbox {
      display: flex;
      margin-top: 3.7rem;

      .leftbox {
        width: 68.5rem;
        height: 23.3rem;
        margin-right: 0.8rem;

        .leftbg {
          width: 68.5rem;
          height: 23.3rem;
          position: relative;
          background-image: require(
            "https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bg_programme1.png"
          );
          background-image: require(
            "https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bg_programme1.png"
          );
          background-size: 100% auto;
          background-position: 0 0;
          background-repeat: no-repeat;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;

          .leftbg_active {
            position: absolute;
            left: 0;
            width: 100%;
            height: 100%;
            bottom: 100%;
            box-sizing: border-box;
            background-image: url("https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bg_programme11.png");
            background-size: 100% auto;
            background-position: 0 0;
            background-repeat: no-repeat;
            transition: bottom 1s;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            box-sizing: border-box;

            .activetxt {
              margin-left: 2.5rem;

              div:nth-child(1) {
                font-size: 1.8rem;
                font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                font-weight: 400;
                text-align: left;
                color: #333333;
              }

              div:nth-child(2) {
                font-size: 1.2rem;
                font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                font-weight: 400;
                text-align: left;
                color: #e0251b;
                margin: 0.4rem 0 0.7rem;
              }

              div:nth-child(3) {
                width: 19.5rem;
                font-size: 0.9rem;
                font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                font-weight: 400;
                text-align: left;
                color: #181818;
              }
            }
          }
        }

        .leftbg:hover {
          .leftbg_active {
            position: absolute;
            left: 0;
            width: 100%;
            bottom: 0%;
            height: 100%;
            box-sizing: border-box;
            background-image: url("https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bg_programme11.png");
            background-size: 100% auto;
            background-position: 0 0;
            background-repeat: no-repeat;
            transition: bottom 1s;
            display: flex;
            flex-wrap: wrap;

            box-sizing: border-box;

            .activetxt {
              margin-left: 2.5rem;

              div:nth-child(1) {
                font-size: 1.8rem;
                font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                font-weight: 400;
                text-align: left;
                color: #333333;
              }

              div:nth-child(2) {
                font-size: 1.2rem;
                font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                font-weight: 400;
                text-align: left;
                color: #e0251b;
                margin: 0.4rem 0 0.7rem;
              }

              div:nth-child(3) {
                width: 19.5rem;
                font-size: 0.9rem;
                font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                font-weight: 400;
                text-align: left;
                color: #181818;
              }
            }
          }
        }
      }
    }

    .rightbox {
      width: 39.3rem;
      height: 23.3rem;

      .rightbg {
        width: 39.3rem;
        height: 23.3rem;
        position: relative;
        background-image: url("https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bg_programme2.png");
        background-size: 100% auto;
        background-position: 0 0;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;

        .rightbg_active {
          position: absolute;
          left: 0;
          width: 100%;
          height: 100%;
          bottom: 100%;
          box-sizing: border-box;
          background-image: url("https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bg_programme22.png");
          background-size: 100% auto;
          background-position: 0 0;
          background-repeat: no-repeat;
          transition: bottom 1s;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          box-sizing: border-box;

          .activetxt {
            margin-left: 2rem;

            div:nth-child(1) {
              font-size: 1.2rem;
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              font-weight: 400;
              text-align: left;
              color: #e0251b;
              margin: 0.4rem 0 0.7rem;
            }

            div:nth-child(2) {
              width: 17rem;
              font-size: 0.9rem;
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              font-weight: 400;
              text-align: left;
              color: #181818;
            }
          }
        }
      }

      .rightbg:hover {
        .rightbg_active {
          position: absolute;
          left: 0;
          width: 100%;
          bottom: 0%;
          height: 100%;
          box-sizing: border-box;
          background-image: url("https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bg_programme22.png");
          background-size: 100% auto;
          background-position: 0 0;
          background-repeat: no-repeat;
          transition: bottom 1s;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          box-sizing: border-box;

          .activetxt {
            margin-left: 2rem;

            div:nth-child(1) {
              font-size: 1.2rem;
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              font-weight: 400;
              text-align: left;
              color: #e0251b;
              margin: 0.4rem 0 0.7rem;
            }

            div:nth-child(2) {
              width: 17rem;

              font-size: 0.9rem;
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              font-weight: 400;
              text-align: left;
              color: #181818;
            }
          }
        }
      }
    }
  }
  .number {
    width: 107.6rem;
    padding: 4.3rem 0 7.9rem;
    margin: 0 auto;
    .num_ul {
      display: flex;
      justify-content: space-around;
      margin-top: 3.9rem;
    }
    .num_ul li {
      width: 26.6rem;
      height: 28.6rem;
      position: relative;
    }

    .num_ul li:hover .num_li {
      height: 28.6rem;
    }
    .num_ul li:hover .num_li .p_div {
      height: 5.7rem;
      opacity: 1;
    }

    .num_li {
      width: 26.6rem;
      height: 8.5rem;
      opacity: 0.85;
      background: #e0251b;
      overflow: hidden;
      position: absolute;
      bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      color: #ffffff;
      transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);

      span {
        font-size: 2.4rem;
      }
      div {
        font-size: 1.4rem;
        margin-top: 0.5rem;
      }
      .p_div {
        width: 22rem;
        height: 0rem;
        font-size: 1.4rem;
        margin-top: 1.2rem;
        opacity: 0;
        text-align: center;
        line-height: 2.3rem;
      }
    }
    .item1 {
      background: url("https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bg_num1.png");
      background-size: 26.6rem 28.6rem;
      height: 28.6rem;
    }
    .item2 {
      background: url("https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bg_num2.png");
      background-size: 26.6rem 28.6rem;
      height: 28.6rem;
    }
    .item3 {
      background: url("https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bg_num3.png");
      background-size: 26.6rem 28.6rem;
      height: 28.6rem;
    }
    .item4 {
      background: url("https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bg_num4.png");
      background-size: 26.6rem 28.6rem;
      height: 28.6rem;
    }
  }
  .guide-content {
    margin: 2.3rem 0 5.2rem 0;

    .salesList {
      width: 119rem;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      li {
        width: 23.4rem;
        height: 46.5rem;
        background: #efefef;
        margin-bottom: 1.8rem;
        img {
          width: 23.4rem;
          height: 36.6rem;
        }
        .salespan {
          padding: 0.4rem 0 0 0.9rem;
          span:first-child {
            font-size: 1.6rem;
            font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
            font-weight: 400;
            text-align: left;
            color: #000000;
            line-height: 2.1rem;
          }
          span:last-child {
            font-size: 1.3rem;
            font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
            font-weight: 400;
            text-align: left;
            color: #666666;
            line-height: 1.7rem;
          }
        }
        .salespan1 {
          font-size: 1.2rem;
          font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
          font-weight: 400;
          text-align: left;
          color: #666666;
          line-height: 1.9rem;
          margin: 0.6rem 1rem 0 0.8rem;
        }
      }
    }
  }
  .cooper {
    width: 117rem;
    margin: auto;
    margin-top: 3.7rem;
    margin-bottom: 10.7rem;
    img {
      width: 100%;
    }
  }
  .supply {
    width: 100%;
    height: 59.2rem;
    background: url("https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/supply.png");
    background-size: 100% 59.2rem;
    background-repeat: no-repeat;
    padding-top: 6.4rem;
    margin-bottom: 5.2rem;
    .titletxt1 {
      width: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      h5 {
        font-size: 2.4rem;
        color: #000000;
        line-height: 3.1rem;
        font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
        font-weight: 700;
        margin-bottom: 0.3rem;
      }
      span {
        font-size: 1.4rem;
        color: #666666;
        line-height: 1.9rem;
      }
    }
    .content {
      width: 107.6rem;
      padding-top: 6.4rem;
      margin: 0 auto;

      .supply_ul {
        display: flex;
        justify-content: space-around;
        li {
          width: 26.5rem;
          height: 32.4rem;
          background: #ffffff;
          border-radius: 1.5rem;
          padding: 3rem;
          .imgdiv {
            width: 3.9rem;
            height: 3.9rem;
            margin-bottom: 1rem;
            background-image: url("../assets/icon/suppy_icon1.png");
            background-size: 3.9rem 3.9rem;
            background-repeat: no-repeat;
          }
          .imgdiv2 {
            width: 3.9rem;
            height: 3.9rem;
            margin-bottom: 1rem;
            background-image: url("../assets/icon/suppy_icon2.png");
            background-size: 3.9rem 3.9rem;
            background-repeat: no-repeat;
          }
          .imgdiv3 {
            width: 3.9rem;
            height: 3.9rem;
            margin-bottom: 1rem;
            background-image: url("../assets/icon/suppy_icon3.png");
            background-size: 3.9rem 3.9rem;
            background-repeat: no-repeat;
          }
          .imgdiv4 {
            width: 3.9rem;
            height: 3.9rem;
            margin-bottom: 1rem;
            background-image: url("../assets/icon/suppy_icon4.png");
            background-size: 3.9rem 3.9rem;
            background-repeat: no-repeat;
          }
          .txt {
            font-size: 1.8rem;
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: 700;
            text-align: left;
            color: #e0251b;
            letter-spacing: 0.18px;
            margin-bottom: 0.2rem;
          }
          .line {
            width: 21.1rem;
            height: 0px;
            border-bottom: 0.1rem solid #848484;
            margin: 2rem 0;
          }
          p {
            width: 21rem;
            font-size: 1.5rem;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            text-align: left;
            color: #848484;
            line-height: 2rem;
          }
        }

        li:hover {
          background: #e0251b;

          .imgdiv {
            background-image: url("../assets/icon/suppy_icon11.png");
          }
          .imgdiv2 {
            background-image: url("../assets/icon/suppy_icon22.png");
          }
          .imgdiv3 {
            background-image: url("../assets/icon/suppy_icon33.png");
          }
          .imgdiv4 {
            background-image: url("../assets/icon/suppy_icon44.png");
          }
          .txt {
            color: #ffffff;
          }
          .line {
            border-bottom: 0.1rem solid #ffffff;
          }
          p {
            color: #ffffff;
          }
        }
      }
    }
  }
}
.footer-top {
  position: relative;
  bottom: 0;
  width: 100%;
  height: 16rem;
  background: linear-gradient(180deg, #e63f04, #ac0d0d);
  color: #fff;

  .licence-code {
    width: 120rem;
    height: 16rem;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .nav {
      display: flex;

      li {
        font-size: 1.6rem;
        font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
        line-height: 2rem;
        margin-right: 4.1rem;
      }

      .active {
        font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
        font-weight: 700;
      }
    }

    .about-h55 {
      margin: 0rem 0 1.8rem;
    }

    .licence-h5,
    .QR-code-h5 {
      padding-bottom: 1.6rem;
      border-bottom: 1px solid #fff;
      margin: 2rem 0 1.1rem;
    }

    h5 {
      color: #fff;
      font-size: 1.6rem;
      font-weight: 700;
    }

    p {
      margin-bottom: 0.7rem;
      font-size: 1.4rem;
      line-height: 1.9rem;
    }
  }
}
.titletxt {
  width: 107.6rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  h5 {
    font-size: 2.4rem;
    color: #000000;
    line-height: 3.1rem;
    font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
    font-weight: 500;
    margin-bottom: 0.3rem;
  }
  span {
    font-size: 1.4rem;
    color: #666666;
    line-height: 1.9rem;
  }
}

.MC {
  width: 107.6rem;
  padding: 2.66rem 0 2.5rem;
  margin: 0 auto;
  // background-color: pink;

  .mcTitle {
    font-size: 2.4rem;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    text-align: left;
    color: #181818;
    margin-left: 7rem;
  }

  .mcIcon {
    // background-color: #fff;
    padding-top: 2.95rem;
    text-align: center;

    .mcText {
      position: relative;

      .name {
        position: absolute;
        left: 38.2rem;
        top: -1.5rem;
        font-size: 1rem;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        color: #4b4b4b;
        line-height: 1.21rem;
      }

      .noName {
        position: absolute;
        left: 65.1rem;
        top: -1.5rem;
        font-size: 1rem;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        color: #4b4b4b;
        line-height: 1.21rem;
      }
    }

    .mcImg1,
    .mcImg7 {
      width: 1.5rem;
    }

    .mcImg3,
    .mcImg5 {
      width: 2rem;
    }

    .mcImg2,
    .mcImg4,
    .mcImg6 {
      width: 23.86rem;
    }
  }

  .mcBanner {
    display: flex;
    justify-content: center;

    img {
      margin-top: 8rem;
      width: 42.29rem;
    }

    .mcBannerText {
      width: 47rem;
      margin-left: 3.5rem;
      margin-top: 5rem;
      margin-right: 5rem;

      p {
        margin-bottom: 1rem;
        line-height: 2rem;
        font-size: 1rem;
      }
    }
  }

  .buyBtn {
    width: 10rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1rem;
    background-color: #e0251b;
    margin: 3rem auto 0;
    text-align: center;
    color: #ffffff;
  }
}
</style>
